import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
function BarEchart ({title}) {
  const chartRef = useRef()
  useEffect(() => {
    // 1、在useEffect钩子函数中使用，确保dom元素渲染完毕后才执行
    const chartDom = chartRef.current
    const myChart = echarts.init(chartDom)

    const option = {
      title:{
        text:title
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['Vue', 'React', 'Angular'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [10, 40, 70]
        }
      ]
    };

    option && myChart.setOption(option);
  },[title])
  return <div ref={chartRef} style={{width:'500px',height:'400px'}}></div>
}

export default BarEchart